<template>
    <div class="issue-step">
        <div class="white-box" style="position: relative;">
            <loading :show="loading"></loading>
            <h3 class="box-title m-b-0">{{title}}</h3>
            <p class="text-muted m-b-30 font-13">{{desc}}</p>
            <!--<div class="wizard issue-step-content">-->
            <!--<ul class="wizard-steps" role="tablist">-->
            <!--<li :class="{'active': index === 0}" role="tab" v-for="(step, index) in steps">-->
            <!--<h4><span>{{index}}</span>交接给{{step.groupLabel}}</h4>-->
            <!--</li>-->
            <!--</ul>-->
            <!--<div class="wizard-content">-->
            <!--<div class="wizard-pane" role="tabpanel" :class="{'active': index === 0}" v-for="(step, index) in steps"></div>-->
            <!--</div>-->
            <!--</div>-->
        </div>
    </div>
</template>

<script>
    import '@/static/js/plugins/jquery-wizard/wizard.css'
    import '@/static/js/plugins/jquery-wizard/jquery-wizard.js'
    import Loading from '@/components/widgets/Loading'

    export default {
        name: "IssueStep",
        components: {Loading},
        props: {
            steps: {
                type: Array,
                default: () => []
            },
            loading: {
                type: Boolean,
                default: false
            },
            destroy: {
                type: Boolean,
                default: false
            },
            done: {
                type: Boolean,
                default: false
            },
            id: {
                type: Number | String,
                default: ''
            },
            title: {
                type: String,
                default: ''
            },
            desc: {
                type: String,
                default: ''
            },
        },
        mounted() {
        },
        watch: {
            steps() {
                let content = $(".issue-step-content")
                if (content.length) content.remove()
                content = $("<div class=\"wizard issue-step-content\" />")
                let stepElement = $("<ul class=\"wizard-steps\" role=\"tablist\" />")
                let wizardContent = $(" <div class=\"wizard-content\" />")

                this.steps.forEach((item, index) => {
                    let li = $("<li role=\"tab\"/>")
                    let div = $(" <div class=\"wizard-pane\" role=\"tabpanel\" />")
                    if (index === this.steps.length - 1) {
                        li.addClass('active')
                        div.addClass('active')
                    }
                    let str = ''
                    if (index == this.steps.length - 1 && this.done) {
                        str = `<h4><span>${index + 1}</span>Transferred to${item.groupLabel}(Done)</h4>`
                    } else {
                        str = `<h4><span>${index + 1}</span>Transferred to${item.groupLabel}</h4>`
                    }

                    li.html(str)

                    if (item.comments) {
                        let timelineContent = $("<ul class=\"timeline\" />")
                        item.comments.forEach((comment, i) => {
                            let cls = i % 2 === 1 ? 'timeline-inverted' : ''
                            let timelineLi = `<li class="${cls}">
                    <div class="timeline-badge success">
                    </div>
                    <div class="timeline-panel">
                        <div class="timeline-heading">
                            <h4 class="timeline-title">${comment.author_name}</h4>
                            <p><small class="text-muted">
                                ${comment.date}
                                <i class="fa fa-clock-o"></i></small>
                            </p>
                        </div>
                        <div class="timeline-body">
                            <p>${comment.text}</p>
                        </div>
                    </div>
                </li>`
                            timelineContent.append(timelineLi)
                        })
                        div.append(timelineContent)
                    }


                    stepElement.append(li)
                    wizardContent.append(div)
                })


                content.append(stepElement)
                content.append(wizardContent)

                $(".issue-step .white-box").append(content)

                content.wizard({
                    onFinish: function () {
                    },
                });

                for (let i = 0; i < this.steps.length - 1; i++) {
                    setTimeout( () => {
                        $(".wizard-next").click()
                    }, i * 300)
                }
            },
            destroy() {
                if (this.destroy) {
                    let content = $(".issue-step-content")
                    if (content.length) content.remove()
                }
            }
        }
    }
</script>

<style lang="stylus">
    .issue-step
        .wizard-content
            position: relative;
            padding: 25px;
            border-color: rgba(120, 130, 140, .13);
            margin-bottom: 30px;

        .wizard-steps > li
            display: table-cell;
            padding: 10px 20px;
        .timeline
            font-size 12px;
            .timeline-badge
                width: 20px;
                height: 20px;
                line-height: 20px;
                margin-left: -10px;

</style>